import React, { Component } from "react";
import { Layout, Menu } from "antd";
import { route } from "&/route"
import {withRouter} from "react-router-dom"
import { PieChartOutlined, DesktopOutlined, UserOutlined, TeamOutlined, FileOutlined } from '@ant-design/icons';
const { Sider } = Layout;
const { SubMenu } = Menu;
@withRouter
 class SildeMenu extends Component {
  renderItem = (route) => {
    if (sessionStorage.users) {
      var rolltype = JSON.parse(sessionStorage.users).rolltype;
      return route.map(item => {
        if (item.children) {
          if (rolltype < item.permission) { 
            return null
          } else {
            return (
              <SubMenu
                key={item.path}
                title={
                  <span>
                    <item.icon />
                    <span>{item.title}</span>
                  </span>
                }
              >
                {this.renderItem(item.children)}
              </SubMenu>
            )
          }
        } else {
          if (rolltype < item.permission) {
            return null;
          } else {
            return (
              <Menu.Item
                key={item.path}
              >
                <item.icon />
                <span>{item.title}</span>
              </Menu.Item>
            )
          }
        }
      })
    } else {
      return null;
    }
  }
  state = {
    collapsed: false,
  };
  onCollapse = collapsed => {
    this.setState({ collapsed });
  };
  handleMenuClick=(item)=>{
    this.props.history.push(item.key)
  }
  render() {
    var pathname=this.props.location.pathname;
    var names=pathname.split("/");
    var OpenKeys=["/"+ names[1]+"/"+names[2]];
    var SelectedKeys=[pathname];
    return (
      <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
        <Menu
          mode="inline"
          theme="dark"
          defaultOpenKeys={OpenKeys}
          selectedKeys={SelectedKeys}
          onClick={this.handleMenuClick}
          mode="inline">
           { this.renderItem(route)}
        </Menu>
      </Sider>
    )
  }
}
export default SildeMenu

